import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { connect } from '@tarojs/redux'

import SubTitle from '../../component/SubTitle';
import HistoryInfoList from '../../component/HistoryInfoList';

import './style.less';

@connect((state) => ({
  historyDetailId: state.system.practice.historyDetailId,
  history: state.system.practice.history,
}))
class HistoryInfo extends Component {

  config = {
    navigationBarTitleText: '百格计算',
    navigationBarBackgroundColor: '#6C8AF8',
    navigationBarTextStyle: 'white'
  }

  render() {
    const { historyDetailId, history } = this.props
    let logs = []
    let obj = {}
    let correct = 0
    let error = 0
    if (history && history.historyMap) {
      obj = history.historyMap[historyDetailId]
      logs = obj.items
      correct = Math.floor((obj.correct / (obj.correct + obj.error)) * 100)
      error = Math.floor((obj.error / (obj.correct + obj.error)) * 100)
    }

    return (
      <View className='historyInfo' >
        <SubTitle title={obj.date} />
        <View className='count' >
          <View className='green' >正确：{correct}%</View>
          <View className='red' >错误：{error}%</View>
        </View>
        <HistoryInfoList logs={logs} />
      </View>
    )
  }
}

export default HistoryInfo
